import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Rank from '../views/Home/Rank.vue'
import Search from '../views/Home/Search.vue'
import Recommend from '../views/Home/Recommend.vue'

Vue.use(VueRouter)

const routes = [{
		path: '/Home',
		name: 'Home',
		component: Home,
		// redirect: "/recommend",
		children: [
		{
			path: "/recommend",
			name: "Recommend",
			component: Recommend,
		},
		{
			path: "/rank",
			name: "Rank",
			component: Rank,
		},
		{
			path: "/search",
			name: "Search",
			component: Search,
		}
		]
	},
	{
		path: '/about',
		name: 'About',
		// route level code-splitting
		// this generates a separate chunk (about.[hash].js) for this route
		// which is lazy-loaded when the route is visited.
		component: () => import( /* webpackChunkName: "about" */ '../views/About.vue'),
		children: [
		{
			path: "recommend",
			name: "Recommend",
			component: Recommend,
		},
		{
			path: "rank",
			name: "Rank",
			component: Rank,
		},
		{
			path: "search",
			name: "Search",
			component: Search,
		}
		]
		
	}
]

const router = new VueRouter({
	routes
})

export default router
